<template>
    <div class="air-quality">
        <div v-if="airData" class="data-panel">
            <div class="content-wrapper">
                <div class="left-panel">
                    <div class="city-info">
                        <h2>{{ airData.area }}</h2>
                        <div class="aqi-display">
                            <div class="aqi-circle" :class="aqiLevelClass">
                                <div class="aqi-value">{{ airData.AQI }}</div>
                                <div class="aqi-text">{{ apiLevel }}</div>
                            </div>
                        </div>
                        <div class="measure-info">
                            <p>{{ airData.measure }}</p>
                            <p>{{ airData.unheathful }}</p>
                        </div>
                    </div>
                    <div class="primary-pollutant" v-if="airData.primarypollutant !== '—'">
                        <span>首要污染物：{{ airData.primarypollutant }}</span>
                    </div>
                </div>

                <div class="right-panel">
                    <div class="pollutant-grid">
                        <div class="pollutant-item">
                            <span class="label">PM2.5</span>
                            <span class="value">{{ airData.PM2_5 }}</span>
                            <span class="unit">µg/m³</span>
                            <span class="level">{{ airData.PM2_5_level }}</span>
                        </div>
                        <div class="pollutant-item">
                            <span class="label">PM10</span>
                            <span class="value">{{ airData.PM10 }}</span>
                            <span class="unit">µg/m³</span>
                            <span class="level">{{ airData.PM10_level }}</span>
                        </div>
                        <div class="pollutant-item">
                            <span class="label">SO₂</span>
                            <span class="value">{{ airData.SO2 }}</span>
                            <span class="unit">µg/m³</span>
                            <span class="level">{{ airData.SO2_level }}</span>
                        </div>
                        <div class="pollutant-item">
                            <span class="label">NO₂</span>
                            <span class="value">{{ airData.NO2 }}</span>
                            <span class="unit">µg/m³</span>
                            <span class="level">{{ airData.NO2_level }}</span>
                        </div>
                        <div class="pollutant-item">
                            <span class="label">CO</span>
                            <span class="value">{{ airData.CO }}</span>
                            <span class="unit">mg/m³</span>
                            <span class="level">{{ airData.CO_level }}</span>
                        </div>
                        <div class="pollutant-item">
                            <span class="label">O₃</span>
                            <span class="value">{{ airData.O3 }}</span>
                            <span class="unit">µg/m³</span>
                            <span class="level">{{ airData.O3_level }}</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, defineProps } from 'vue'

const props = defineProps({
    area: {
        type: String,
        required: true,
        default: "惠州市"
    }
})

const airData = ref(null)
const currentTime = ref('')

// 获取空气质量数据
const fetchData = async (area) => {
    try {
        console.log('开始获取数据...')
        const response = await fetch("http://127.0.0.1:8765/get", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                area: area
            })
        })
        console.log('请求响应:', response)

        const result = await response.json()
        console.log('获取到的数据:', result)

        if (result.status === 0 && result.data.rows.length > 0) {
            airData.value = result.data.rows[0]
            updateCurrentTime()
        } else {
            console.error('数据格式不正确:', result)
        }
    } catch (error) {
        console.error("获取空气质量数据失败", error)
    }
}

const updateCurrentTime = () => {
    const now = new Date()
    currentTime.value = `${now.getMonth() + 1}月${now.getDate()}日${now.getHours()}:${String(now.getMinutes()).padStart(2, '0')}`
}

const apiLevel = computed(() => {
    const aqi = Number(airData.value?.AQI)
    if (!aqi) return ''
    if (aqi <= 50) return '优'
    if (aqi <= 100) return '良'
    if (aqi <= 150) return '轻度污染'
    if (aqi <= 200) return '中度污染'
    if (aqi <= 300) return '重度污染'
    return '严重污染'
})

const aqiLevelClass = computed(() => {
    const aqi = Number(airData.value?.AQI)
    if (!aqi) return ''
    if (aqi <= 50) return 'level-good'
    if (aqi <= 100) return 'level-moderate'
    if (aqi <= 150) return 'level-unhealthy-sensitive'
    if (aqi <= 200) return 'level-unhealthy'
    if (aqi <= 300) return 'level-very-unhealthy'
    return 'level-hazardous'
})

onMounted(() => {
    fetchData(props.area)
})

watch(() => props.area, (newArea) => {
    fetchData(newArea)
})
</script>

<style scoped>
.air-quality {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 5px;
}

.data-panel {
    background-color: white;
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.city-info {
    text-align: center;
    margin: 20px 0 20px 0;
}

.aqi-display {
    margin: 8px 0;
}

.aqi-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}

.aqi-number {
    font-size: 40px;
    font-weight: bold;
}

.aqi-text {
    font-size: 18px;
}

.pollutant-grid {
    height: 100%;
    display: grid;
    margin: 20px 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 25px;
}

.pollutant-item {
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-self: space-between;
}

.label .value .unit .level {
    display: block;
}

.label {
    min-width: 60px;
}

.value {
    font-size: 24px;
    min-width: 30px;
    font-weight: bold;
    margin: 0 20px;
    text-align: center;
}

.unit {
    min-width: 30px;
    font-size: 14px;
    color: #999;
}

.level {
    display: none;
    margin-left: 15px;
    /* position: absolute;
    bottom: 10px;
    right: 10px; */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
}

.pollutant-item:hover .level {
    display: inline;
}

/* 空气质量等级样式 */
.level-good {
    background-color: #00e400;
}

.level-moderate {
    background-color: #ffff00;
    color: #666;
}

.level-unhealthy-sensitive {
    background-color: #ff7e00;
}

.level-unhealthy {
    background-color: #ff0000;
}

.level-very-unhealthy {
    background-color: #99004c;
}

.level-hazardous {
    background-color: #7e0023;
}

/* 添加新样式 */
.measure-info {
    margin: 20px 0;
    text-align: center;
    color: #666;
}

.measure-info p {
    margin: 5px 0;
}

.primary-pollutant {
    text-align: center;
    margin-top: -10px;
    color: #ff4d4f;
    font-weight: bold;
}

.content-wrapper {
    display: flex;
    height: 400px;
    gap: 30px;
    margin-bottom: 5px;
}

.left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #eee;
}

.right-panel {
    display: flex;
    margin-left: -25px;
    flex-direction: column;
    justify-content: center;
    flex: 2;
}
</style>